<template>
	<view class="my-impression">
		<view class="cell-box">
			<view class="cell-item" v-for="(item, index) in tags" :key="item">
				<view class="left">
					<view class="text">{{item.text}}</view>
				</view>
				<view class="right">
					<image src="https://ywtmp.hnwytkj.com/static/images/edit2.png" mode="" @tap="edit(index)"></image>
					<image src="https://ywtmp.hnwytkj.com/static/images/delete.png" mode="" @tap="remove(index)"></image>
				</view>
			</view>
			<view class="add-btn" @tap="addTags">+ 新建标签</view>
		</view>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog mode="input" title="自定义标签" @confirm="dialogInputConfirm">
				<view>
					<view>
						<uni-easyinput v-model="tagText" placeholder="请输入标签"></uni-easyinput>
					</view>
					<view class="color-box">
						<view v-for="item in colorList" :key="item.color" class="color-item" @tap="selectColor(item)">
							<view class="color" :style="{ backgroundColor: item.value }"></view>
							<!-- <text>{{ item.label }}</text> -->
							<icon v-if="color === item.value" type="success" size="14"/>
						</view>
					</view>
				</view>
			</uni-popup-dialog>				
		</uni-popup>
	</view>
</template>

<script>
import http from '@/utils/http.js'
export default {
  data() {
    return {
      tagText: '',
	  color: '',
	  info: {},
	  tags: [],
	  editIndex: -1,
	  colorList: [
		  {
		  			label: '红',
		  			value: '#ff0000',
		  },
		  {
		  			label: '橙',
		  			value: '#ffa500'
		  },
		  {
		  			label: '黄',
		  			value: '#ffff00'
		  },
		  {
		  			label: '绿',
		  			value: '#008000'
		  },
		  {
		  			label: '青',
		  			value: '#00ffff'
		  },
		  {
		  			label: '蓝',
		  			value: '#0000ff'
		  },
		  {
		  			label: '紫',
		  			value: '#800080'
		  }
	  ]
    }
  },
  onLoad() {
	  this.getData()
  },
  methods: {
	addTags() {
		this.editIndex = -1
		this.$refs.inputDialog.open()
	},
	edit(index) {
		this.editIndex = index
		this.color = this.tags[index].color
		this.tagText = this.tags[index].text
		this.$refs.inputDialog.open()
	},
	selectColor(item) {
		this.color = item.value
	},
	remove(index) {
		let tags = JSON.parse(JSON.stringify(this.tags))
		tags.splice(index, 1)
		http({
			url: 'card/user-profile/module/update',
			method: 'put',
			data: {
				...this.info,
				companyImpression: JSON.stringify(tags)
			}
		}).then(res => {				
			if(res.code === 0) {
				// uni.showToast({
				// 	title: '保存成功',
				// 	icon: "success"
				// });
				this.getData()
			}
		})
	},
	dialogInputConfirm() {
		let tags = JSON.parse(JSON.stringify(this.tags))
		if (this.editIndex < 0) {
			tags.push({
				text: this.tagText,
				color: this.color
			})
		} else {
			tags[this.editIndex].color = this.color
			tags[this.editIndex].text = this.tagText
		}		
		http({
			url: 'card/user-profile/module/update',
			method: 'put',
			data: {
				...this.info,
				companyImpression: JSON.stringify(tags)
			}
		}).then(res => {				
			if(res.code === 0) {
				this.$refs.inputDialog.close()
				this.tagText = ''
				this.color = ''
				uni.showToast({
					title: '保存成功',
					icon: "success"
				});
				this.getData()
			}
		})
	},
	getData() {
		http({
			url: 'card/user-profile/get'
		}).then(res => {				
			if(res.code === 0) {
				this.info = res.data.companyProfileDO
				try{					
					this.tags = res.data.companyProfileDO.companyImpression ? JSON.parse(res.data.companyProfileDO.companyImpression) : []
				}catch(e){
					//TODO handle the exception
					this.tags = []
				}				
			}
		})		
	}
  },
}
</script>

<style lang="scss" scoped>
	.my-impression {
		background: #F0F0F4;
		min-height: 100vh;
		padding: 20rpx;
		box-sizing: border-box;
		font-family: PingFang SC;
		.cell-box {			
			.cell-item {
				height: 100rpx;
				background: #FFFFFF;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx 0 40rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 20rpx;
				.left {
					display: flex;
					align-items: center;
					.text {
						max-width: 450rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
					.tag {
						font-family: DIN Next LT Pro;
						font-weight: bold;
						font-size: 28rpx;
						color: #FFA031;
						margin-left: 22rpx;
					}
				}
				.right {
					image {
						width: 70rpx;
						height: 70rpx;
						&:first-child {
							margin-right: 20rpx;
						}
					}
				}
			}
		}
		.add-btn {
			background: #E6ECFF;
			height: 100rpx;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;			
			font-weight: 500;
			font-size: 28rpx;
			color: #4B73FF;
		}
		.color-box {
			display: flex;
			// align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			height: 80rpx;
			.color-item {
				text-align: center;
				margin: 0 10rpx;
				.color {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
			}
		}
	}
</style>